<template>
  <dialog class="modal fixed" :class="{ 'modal-open': isOpen }">
    <div class="modal-box max-w-none w-auto max-h-[90vh] overflow-auto p-0 m-0">
      <div class="w-full">
        <div
          class="navbar border-b border-base-300 flex items-center justify-between"
        >
          <a class="btn btn-ghost text-lg">{{ title }}</a>
          <button class="btn btn-ghost btn-sm" @click="$emit('close')">
            <XMarkIcon class="w-5 h-5" />
          </button>
        </div>
        <div class="modal-body w-full h-full p-4">
          <slot></slot>
        </div>
      </div>
    </div>
    <div class="modal-backdrop" @click="hideDialog"></div>
  </dialog>
</template>
<script setup>
import { XMarkIcon } from "@heroicons/vue/24/solid";
defineProps({
  title: {
    type: String,
    default: "个人信息",
  },
  isOpen: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["close"]);

const hideDialog = () => {
  emit("close");
};
</script>
